大家好，今天的篇章要介紹的是延續昨天的 Draft.js

一樣會延續前一天的專案結構接續下去進行修改，如果沒有參與到昨天的建置過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day17-draft-js

在前一篇已經實作了最基本的 Editor 來改變值並做存取

RichUtils，粗體、斜體、底線

接下來要放上文字編輯器最基本的粗體、斜體、底線功能

要先安裝 @material-ui/icons 來得到方便使用的 svg Icon

npm i @material-ui/icons

利用 material-ui 的 IconButton 來加幾個帶有 icon 的按鈕

會是這樣使用它

Button 所掛的事件

這邊利用 draft.js 提供的 RichUtils，它所提供的靜態方法可以直接改變 editorState 的值並回傳，預設 提供了 BOLD ITALIC UNDERLINE CODE 這幾種，選取的文字狀態 draft.js 也會幫你處理

就來個執行結果看看

CODE 的使用漏掉了，也補上來

執行結果

在這邊先附上目前的完整程式碼

customStyleMap，font-size、font-family

似乎已經有一點點文字編輯器的樣子，但是還可以有更多功能，最好還要能夠調整 font-size，或是修改 font-family，就來實作吧

首先新增 styleMap 相關的設定檔

+ src/components/DraftJsPractice/useStyleMap.ts

這邊定義了待會下拉選單會用到的 fontFamilyStyleMap 以及 fontSizeStyleMap，最後一個 customStyleMap 是要讓 Editor 讀的

回到 src/components/DraftJsPractice/DraftJsPractice.tsx

這裡對 Editor 增加了屬性 customStyleMap={customStyleMap}，也做了兩個下拉選單以及對應的處理事件來切換 style

執行結果

切換 font-size

切換 font-family

因為時間來不及的關係，超連結及圖片得日後再行補上，十分抱歉

RichUtils 超連結

AtomicBlockUtils 圖片

以上就是筆者在使用 Draft.js 一點小小心得，完全用 React 的方式來實作文字編輯器，聽說可能是會有一點點效能上的問題，因為每個動作對 Editor 來說都是會觸發 onChange 去改變 state，不過目前實作的狀況都還算是人類感覺不到有拖累效能的吧 XD

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day18-draft-js

明天會介紹 React DnD，在 React 實現 drag drop 的好工具